<template>
  <div class="bomBuyer">
    <div class="content-main">
        <!-- <div class="detail-info-main" v-if="materialCountData">
          <div class="title-p">
            物料状态数据统计
          </div>
          <div class="info-main">
            <div class="info-item" v-for="item in materialCountData.result" :key="`count-${item.status}`">
              <span class="info-label">{{ item.demandStatus }}:</span>
              <span class="info-text">
                {{ item.num }}
              </span>
            </div>
          </div>
        </div> -->
        
        <div class="sub-form-search">
          <ele-form-search
            ref="eleDetailFormSearch"
            :formConfig="detailSearchConfig"
            @handleSearch="handleDetailSearch"
            @handleReset="handleDetailReset"
          ></ele-form-search>
        </div>
        <div class="sub-table-table">
          物料需求列表
        </div>
        <ele-table
          ref="domDetailTable"
          :column="detailColumn"
          :apiImmediate="true"
          :getList="getAccessoryList"
          :beforeRequest="selfSubBeforeRequest"
          :operateList="operateList"
          @handleOperateEvent="handleOperateEvent"
        >
        </ele-table>
    </div>
    <detail-drawer ref="detailDrawerRef" @updateList="updateDomDetailTable" />
    <el-image-viewer
      v-if="showViewer"
      :on-close="closeViewer"
      :url-list="showViewerImages"
      :initialIndex="initialIndex"
    />
  </div>
</template>

<script>
import eleFormSearch from '@/components/ele-form-search/index'
import { exportExcel } from "@/utils/judge";
import { operateList, detailSearchConfig, rowConfig } from './config'
import { getAccessoryList, exportUrl, reinquiryRequest } from '@/api/materials/procurement.js'
import { searchArrKey } from '@/mixins/searchArrKey'
import detailDrawer from './detailDrawer.vue'

import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  name: 'supplier',
  components: {
    eleFormSearch,
    detailDrawer,
    ElImageViewer
  },
  mixins: [detailSearchConfig, operateList, searchArrKey],
  data() {
    let _self = this
    return {
      getAccessoryList,
      materialCountData: null,
      tableMockData: [{
      }],
      detailColumn: [
        {
          type: 'index',
          label: $i18n.t('common.order'),
          width: 60,
          fixed: 'left'
        },
        {
          prop: 'orderCode',
          label: '需求单编号',
          minWidth: 140,
          showOverflowTooltip: true
        },
        {
          prop: 'materialName',
          label: $i18n.t('bomBuyer.materialName'),
          minWidth: 140,
          showOverflowTooltip: true
        },
        {
          prop: 'materialBrand',
          label: '品牌',
          minWidth: 140,
          showOverflowTooltip: true
        },
        {
          prop: 'materialUnit',
          label: '规格',
          minWidth: 140,
          showOverflowTooltip: true
        },
        {
          prop: 'demandStatus',
          label: $i18n.t('common.status'),
          minWidth: 140,
          showOverflowTooltip: true,
          render: (h, scope) => {
            return (
              <span>
                <span class={`${_self.getClassName(scope.row.demandStatus)} status-circle`}></span>
                <span>{scope.row.demandStatus}</span>
              </span>
            )
          }
        },
        {
          prop: 'quoNum',
          label: $i18n.t('bomBuyer.goodsQuotedNum'),
          minWidth: 140,
          showOverflowTooltip: true,
          renderHeader: (h, scope) => {
            return (
              <span>
                <span>{$i18n.t('bomBuyer.goodsQuotedNum')}</span>
                <el-tooltip class="item" effect="dark" content={$i18n.t('bomBuyer.prompt1')} placement="top-start">
                  <i class="el-icon-info warning-icon"></i>
                </el-tooltip>
              </span>
            )
          }
        },
        {
          prop: 'materialNum',
          label: $i18n.t('bomBuyer.quantity'),
          minWidth: 140,
          showOverflowTooltip: true
        },
        {
          prop: 'demandPackUnit',
          label: "包装单位",
          minWidth: 140,
          showOverflowTooltip: true,
        },
        {
          prop: 'demandPackCapacity',
          label: "包装容量",
          minWidth: 140,
          showOverflowTooltip: true,
        },
        {
          prop: 'materialPhotoUrl',
          label: $i18n.t('bomBuyer.picture'),
          minWidth: 140,
          showOverflowTooltip: true,
          render: (h, scope) => {
            let _dom = []
            if (scope.row.materialPhotoUrl) {
              _dom.push(
                <el-link
                  type="primary"
                  onClick={() => {
                    this.showImgViewer(scope.row)
                  }}
                >
                  {$i18n.t('common.view')}
                </el-link>
              )
            } else {
              _dom.push(<span>-</span>)
            }
            return _dom
          }
        },
        {
          prop: 'createByName',
          label: $i18n.t('bomBuyer.creator'),
          minWidth: 140,
          showOverflowTooltip: true
        },
        {
          prop: 'createTime',
          label: $i18n.t('bomBuyer.createTime'),
          minWidth: 160,
          showOverflowTooltip: true
        },
        {
          prop: 'deadlineTime',
          label: $i18n.t('bomBuyer.offerDeadline'),
          minWidth: 160,
          showOverflowTooltip: true
        },
        {
          prop: 'operate',
          label: $i18n.t('common.operation'),
          width: 200,
          fixed: 'right',
          render: (h, scope) => {
            return <ele-row-operation scope={scope} rowConfig={rowConfig} onRowOperate={this.rowOperate} />
          }
        }
      ],
      showViewer: false,
      initialIndex: 0,
      showViewerImages: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg'
      ]
    }
  },
  computed: {},
  methods: {
    //子表搜索
    handleDetailSearch() {
      this.subRefresh()
    },
    //子表重置
    handleDetailReset() {
      this.subRefresh()
    },
    // 子表，请求之前操作
    selfSubBeforeRequest(data) {
      const params = { ...data, ...this.getDetailSearchParams() }
      if (Array.isArray(params.dateRanger)) {
        params.startTime = params.dateRanger[0]
        params.endTime = params.dateRanger[1]
        delete params.dateRanger
      }
      return params
    },
    // 获取搜索参数
    getDetailSearchParams() {
      let formData = this.$refs.eleDetailFormSearch.formData || {}
      formData = this.getArrtoMap(formData)
      return formData
    },
    updateDomDetailTable() {
      this.$refs.domDetailTable.getTableData(false)
    },
    getClassName(stutus) {
      let text = ''
      switch (stutus) {
        case '询价中':
          text = 'status-light-blue'
          break
        case '待选择':
          text = 'status-blue'
          break
        case '部分到货':
        text = 'status-light-green'
        break
        case '已确认':
          text = 'status-dark-green'
          break
        case '已到货':
          text = 'status-dark-blue'
          break
        case '已领取':
          text = 'status-orange'
          break
        case '已结算':
          text = 'status-gray'
          break
        case '未响应':
          text = 'status-red'
          break
        default:
          break
      }
      return text
    },
    // 表格顶部按钮操作事件
    handleOperateEvent(data) {
      this.title = data.name
      const fnc = {
        download: () => {
          console.log(this.rowParams.recheckOrderId)
          exportExcel(exportUrl, {
            recheckOrderId: this.rowParams.recheckOrderId
          })
        }
      }
      fnc[data.handleName]()
    },
    // 子表表格行操作事件
    rowOperate({ handleName, name, row }) {
      this.title = name
      const fnc = {
        detail: () => {
          this.rowDetail(row)
        },
        reinquiry: () => {
          this.$confirm($i18n.t('bomBuyer.prompt2'), $i18n.t('common.tip'), {
            confirmButtonText: $i18n.t('common.ok'),
            cancelButtonText: $i18n.t('common.cancel'),
            type: 'warning'
          }).then(() => {
            this.rowReinquiry(row)
          })
        }
      }
      fnc[handleName]()
    },
    rowReinquiry(row) {
      let params = {
        id: row.id
      }
      reinquiryRequest(params).then(res => {
        if (res.data.success) {
          this.$message.success(this.$t('common.operateSuccess'))
          // this.subRefresh()
          this.updateDomDetailTable()
        }
      })
    },
    rowDetail(row) {
      this.$refs.detailDrawerRef.drawer = true
      this.$refs.detailDrawerRef.infoData.id = row.id
      this.$refs.detailDrawerRef.supplementForm.remarks = row.remarks
      if(row.materialPhotoUrl) {
        this.$refs.detailDrawerRef.supplementForm.pictureList = (row.materialPhotoUrl?.split(',')).map(ele => {
          return {
            path: ele,
            src: ele
          }
        })
      } else {
        this.$refs.detailDrawerRef.supplementForm.pictureList = []
      }
      
      console.log(this.$refs.detailDrawerRef.supplementForm.pictureList)
      this.$refs.detailDrawerRef.infoData.materialName = row.materialName
      this.$refs.detailDrawerRef.infoData.demandPackUnit = row.demandPackUnit
      this.$refs.detailDrawerRef.infoData.materialNum = row.materialNum
      this.$refs.detailDrawerRef.infoData.materialCode = row.materialCode
      this.$refs.detailDrawerRef.infoData.deadlineTime = row.deadlineTime
      this.$refs.detailDrawerRef.infoData.demandStatus = row.demandStatus
      this.$refs.detailDrawerRef.infoData.materialPhotoUrl = row.materialPhotoUrl?.split(',') || []
      this.$refs.detailDrawerRef.getTableData()
      this.$refs.detailDrawerRef.getBrandList()
    },
    //图片预览展示
    showImgViewer(row) {
      this.showViewer = true
      this.showViewerImages = row.materialPhotoUrl?.split(',') || []
    },
    //关闭图片预览弹框
    closeViewer() {
      this.showViewer = false
      this.initialIndex = 0
    },
    // 刷新子表
    subRefresh(isReset = true) {
      this.$nextTick(() => {
        this.$refs.domDetailTable.getTableData(isReset)
      })
    },
  }
}
</script>
<style scoped lang="scss">
/deep/ .warning-icon {
  color: #e6a23c;
  padding-left: 4px;
}
/deep/ .status-circle {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  margin-right: 4px;
}
/deep/ .status-light-blue {
  background-color: #6a96c8;
}
/deep/ .status-blue {
  background-color: #3c7fcd;
}
/deep/ .status-dark-blue {
  background-color: #2c43c4;
}
/deep/ .status-light-green {
  background-color: #67c23a;
}
/deep/ .status-dark-green {
  background-color: #078159;
}
/deep/ .status-orange {
  background-color: #e6a23c;
}
/deep/ .status-red {
  background-color: #f56c6c;
}
/deep/ .status-gray {
  background-color: #aaaaaa;
}
.content-main {
  /deep/ .blue-num {
    color: #0066ff;
  }
  .detail-info-main {
    padding-top: 10px;
    .title-p {
      font-size: 18px;
      line-height: 30px;
      margin-bottom: 10px;
    }
    .info-main {
      display: flex;
      flex-wrap: wrap;
      .info-item {
        width: 20%;
        margin-bottom: 10px;
        font-size: 14px;
        .info-label {
          padding-right: 2px;
        }
      }
    }
  }
  .sub-table-table {
    display: inline-block;
    font-size: 14px;
    line-height: 24px;
    padding: 6px 0;
    color: #6399d7;
    border-bottom: 2px solid #6399d7;
    margin-bottom: 20px;
  }
}
</style>
